<template>
	<div class="body">
		<div class="f1">
			<p>如果把生活比喻为创作的意境，那么阅读就像阳光。<span class="right-links"><a href="">登录</a>|<a href="">注册</a></span></p>
		</div>
		<div class="f2">
			<div class="i1"><img src="../../../image/logo.jpg" /></div>
			<div class="i2">
				<input type="text" placeholder="搜索图书">
				<button>搜索</button>
			</div>
			<div class="i3">
				<a href="">我的账号</a>|<a href="">我的书架</a>
			</div>
		</div>
		<div class="navbar">
			<ul class="navbar-list">
				<li><a href="#overview">首页</a></li>
				<li><a href="#getting-started">新闻咨询</a></li>
				<li><a href="#faq">在线试读</a></li>
				<li><a href="#tutorials">每日一读</a></li>
				<li><a href="#examples">国学/古籍</a></li>
				<li><a href="#resources">出版图书</a></li>
				<li><a href="#feedback-support">电子书</a></li>
				<li><a href="#best-practices">读书导航</a></li>
				<li><a href="#social-interaction">人文社科</a></li>
				<li><a href="#changelog">帮助</a></li>
			</ul>
		</div>
		<div class="bd">
			<div class="bofang">
				<div class="dengdai">
					<img src="../../../image/tushu1.jpg" />
					<img src="../../../image/tushu2.jpg" />
					<img src="../../../image/tushu3.jpg" />
				</div>
			</div>
			<div class="x1">
				<ul>
					<li><a href="#">4-23世界读书日，和思南书局一起庆生</a></li>
					<li><a href="#">其大无外，其小无内”：陈世英于威尼斯呈现展览三部曲</a></li>
					<li><a href="#">梁其姿谈中国酱油的文化历程及日常的历史</a></li>
					<li><a href="#">百年“海棠雅集”下江南：首次走进浙东唐诗之路源头</a></li>
					<li><a href="#">日啖荔枝三百颗：苏轼与岭南荔枝</a></li>
					<li><a href="#">康德诞辰300周年：康德的理想主义是应对平庸化的一剂良药</a></li>
					<li><a href="#">涵养读书氛围，中国出版集团将开展系列全民阅读活动</a></li>
					<li><a href="#">魂魄、鬼神与死后世界</a></li>
					<li><a href="#">唐宋传世名琴与故宫藏琴将首度同台，奏响“古琴之夜”</a></li>
					<li><a href="#">Z世代数字阅读报告发布：《繁花》阅读量涨61倍</a></li>
					<li><a href="#">袁寒云侍妾眉云的一生</a></li>
					<li><a href="#">那些历久弥新的美国独立书店</a></li>
					<li><a href="#">唐人眼中的南方“世界”</a></li>
					<li><a href="#">冯子材怒告吏部书办索贿</a></li>
					<li><a href="#">洗冤录：道光初年的两桩自戕案</a></li>
					<li><a href="#">田野考古与“闽浙通衢”之地竹口</a></li>
					<li><a href="#">儒士入宫、内书堂教授：明代内臣知识化的两条主要途径</a></li>
					<li><a href="#">纪念吴昌硕诞辰180周年：杭州超山展胡问遂书法</a></li>
				</ul>
			</div>
			<div class="t1">
				<div class="tab">
					<ul class="tab-head">
						<li><a href="#">图书分类</a></li>
						<li><a href="#">国学经典</a></li>
						<li><a href="#">外国文学</a></li>
						<li><a href="#">读书导航</a></li>
					</ul>
				</div>
				<div class="tab2">
					<ul class="tab-body">
						<li><a href="#">国学入门</a></li>
						<li><a href="#">文学历史</a></li>
						<li><a href="#">纪实文学</a></li>
						<li><a href="#">散文随笔</a></li>
					</ul>
				</div>
				<div class="tab2">
					<ul class="tab-body">
						<li><a href="#">世界名著</a></li>
						<li><a href="#">外国小说</a></li>
						<li><a href="#">言情小说</a></li>
						<li><a href="#">历史小说</a></li>
					</ul>
				</div>
				<div class="tab2">
					<ul class="tab-body">
						<li><a href="#">当代小说</a></li>
						<li><a href="#">网络小说</a></li>
						<li><a href="#">青春言情</a></li>
						<li><a href="#">人物传记</a></li>

					</ul>
				</div>

				<div class="tab2">
					<ul class="tab-body">
						<li><a href="#">收藏鉴赏</a></li>
						<li><a href="#">生活时尚</a></li>
						<li><a href="#">社会科学</a></li>
						<li><a href="#">法律法规</a></li>
					</ul>
				</div>
				<div class="tab2">
					<ul class="tab-body">
						<li><a href="#">少儿童书</a></li>
						<li><a href="#">人文社科</a></li>
						<li><a href="#">历史著作</a></li>
						<li><a href="#">经济管理</a></li>
					</ul>
				</div>
				<div class="tab2">
					<ul class="tab-body">
						<li><a href="#">工业技术</a></li>
						<li><a href="#">自我实现</a></li>
						<li><a href="#">网络应用</a></li>
						<li><a href="#">更多种类</a></li>
					</ul>
				</div>
				<div class="tab-foot">
					<img src="../../../image/1.jpg" />
				</div>
			</div>
		</div>
		<div class="foot1">
			<app-foot></app-foot>
		</div>
	</div>
</template>

<script>
	import AppFoot from '../common/AppFoot.vue';
	export default {
		components: {
			AppFoot,
		},
	}
</script>

<style scoped>
	.body {
		background-color: #fff;
	}

	.f1 {
		width: auto;
		height: 45px;
		background-color: #ffffff;
	}

	p {
		padding-top: 12px;
		padding-left: 100px;
		position: relative;
	}

	.right-links {
		position: absolute;
		right: 100px;
	}

	.right-links a {
		text-decoration: none;
		color: #666;
		font-size: 14px;
		transition: color 0.3s;
	}

	.right-links a:hover {
		color: #333;
	}

	.f2 {
		width: auto;
		height: auto;
		display: flex;
		align-items: center;
	}

	.i1 {
		flex: 0 0 auto;
		padding-right: 20px;
	}

	.i1 img {
		height: 100px;
		padding-left: 100px;
	}

	.i2 {
		flex: 1;
		display: flex;
		align-items: center;
		padding-left: 200px;
	}

	input[type="text"] {
		padding: 8px;
		font-size: 16px;
		width: 300px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-right: 10px;
	}

	button {
		padding: 8px 16px;
		background-color: #333;
		color: #fff;
		border: none;
		cursor: pointer;
		font-size: 16px;
		border-radius: 5px;
	}

	button:hover {
		background-color: #3eafff;
	}

	.i3 {
		padding-right: 99px;
		color: #333;
	}

	.i3 a {
		text-decoration: none;
		color: #666;
	}

	.i3 a:hover {
		color: #333;
	}

	.navbar {
		display: flex;
		justify-content: center;
		background-color: #ffffff;
		padding: 10px 0;
	}

	.navbar-list {
		display: flex;
		list-style-type: none;
		padding: 0;
		flex-wrap: wrap;
	}

	.navbar-list li {
		margin: 0 15px;
		font-weight: bold;
	}

	.navbar-list li a {
		text-decoration: none;
		color: #333;
		padding: 8px 12px;
		border-radius: 5px;
		background-color: #ffffff;
		transition: background-color 0.3s ease;
		position: relative;
	}

	.navbar-list li a:hover::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -3px;
		height: 1px;
		background-color: #333;
	}

	.bofang {
		width: 320px;
		height: 480px;
		overflow: hidden;
		position: relative;
		margin-left: 100px;
	}

	.bofang .dengdai {
		width: 960px;
		height: 480px;
		overflow: hidden;
		position: absolute;
		display: flex;
		animation: run 10s ease infinite;
	}

	.bofang .dengdai img {
		width: 320px;
		height: 100%;
	}

	@keyframes run {

		0%,
		100% {
			transform: translateX(0);
		}

		33.33% {
			transform: translateX(-320px);
		}

		66.66% {
			transform: translateX(-640px);
		}

		100% {
			transform: translateX(0);
		}
	}

	.bd {
		display: flex;
	}

	.x1 {
		width: auto;
		height: 200px;
		padding-left: 30px;
	}

	.x1 ul {
		padding: 0;
	}

	.x1 ul li {
		list-style: none;
		margin-bottom: 10px;

	}

	li {
		line-height: 1;
	}

	.x1 ul li a {
		text-decoration: none;
		color: #333;
		transition: color 0.3s ease;
		display: block;
	}

	.x1 ul li a:hover {
		color: #ff007f;
	}

	.t1 {
		padding-left: 45px;
	}

	.tab-head {
		display: flex;
		list-style: none;
		padding: 0;
	}

	.tab-head li {
		margin-right: 50px;
	}

	.tab-head li a {
		text-decoration: none;
		color: #333;
		border-radius: 5px;
		background-color: #ffffff;
		transition: background-color 0.3s ease;
		position: relative;
		padding-left: 17px;
		font-weight: bold;
	}

	.tab-head li a:hover::before {
		content: '';
		position: absolute;
		left: 0;
		right: -15px;
		bottom: -3px;
		height: 1px;
		background-color: #6fc7ff;
	}

	.t1 .tab {
		width: auto;
		height: auto;
	}

	.t1 .tab2 {
		width: auto;
		height: auto;
	}

	.tab-body {
		display: flex;
		list-style: none;
		padding: 0;
	}

	.tab-body li a {
		text-decoration: none;
		border: 1px solid #ffffff;
		border-radius: 5px;
		padding: 8px 16px;
		margin-right: 20px;
		margin-bottom: -10px;
		margin-top: 10px;
		color: #333;
		transition: background-color 0.3s, color 0.3s;
	}

	.tab-body li a:hover {
		background-color: #ffffff;
		color: #ff557f;
		border-color: #ff557f;
	}

	.t1 .tab-foot img {
		width: 480px;
	}

	.foot1 {
		padding-top: 10px;
	}
</style>